<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>集装箱管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form" style="margin-top:0px;">
        <a-form-model-item label="箱号/封号/运单号/公司编号">
          <a-input v-model="form.codeLike" />
        </a-form-model-item>
        <a-form-model-item label="船名/航次">
          <a-input v-model="form.shipNameLike" />
        </a-form-model-item>
        <a-form-model-item label="持箱人">
          <a-select v-model="form.holderId" style="width:200px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in holderList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="箱属">
          <a-input v-model="form.containerBelongLike" />
        </a-form-model-item>
        <a-form-model-item label="箱况">
          <a-select v-model="form.containerStatus" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="A">A</a-select-option>
            <a-select-option value="COMMON">普通</a-select-option>
            <a-select-option value="BROKEN">坏箱</a-select-option>
            <a-select-option value="DIRTY">污箱</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="箱态">
          <a-select v-model="form.emptyOrHeavy" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="2">重箱</a-select-option>
            <a-select-option :value="1">空箱</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所在港口">
          <a-select v-model="form.portId" style="width:170px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in portList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="始发港">
          <a-input v-model="form.startPortLike" />
        </a-form-model-item>
        <a-form-model-item label="目的港">
          <a-input v-model="form.endPortLike" />
        </a-form-model-item>
        <a-form-model-item class="contain_tim">
          <a-select v-model="form.dateSearchType" style="width:100px;">
            <a-select-option :value="1">卸船日期</a-select-option>
            <a-select-option :value="2">提重日期</a-select-option>
            <a-select-option :value="3">反空日期</a-select-option>
            <a-select-option :value="4">提空日期</a-select-option>
            <a-select-option :value="5">反重日期</a-select-option>
            <a-select-option :value="6">装船日期</a-select-option>
          </a-select>
          <a-range-picker
            @change="onChange"
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item label="是否到用箱期">
          <a-select v-model="form.containerExpireType" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="2">即将超期</a-select-option>
            <a-select-option :value="3">已超期</a-select-option>
            <a-select-option :value="1">未超期</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="箱型">
          <a-select v-model="form.containerTypeId" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in containerList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="excelImport">批量导入</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        style="margin-top:25px;"
        :scroll="{x:3800}"
        :pagination="pagination"
        :row-key="(record,index) => index"
      >
        <template slot="company" slot-scope="text, record">
          <a v-if="record.shipOrderCode" @click="company(record)">{{record.shipOrderCode}}</a>
          <span v-else>--</span>
        </template>
        <template slot="status" slot-scope="text, record">
          <span v-if="record.containerStatus === 'A'">A</span>
          <span v-else-if="record.containerStatus === 'COMMON'">普通</span>
          <span v-else-if="record.containerStatus === 'BROKEN'">坏箱</span>
          <span v-else-if="record.containerStatus === 'DIRTY'">污箱</span>
        </template>
        <template slot="day" slot-scope="text, record">
          <span
            v-if="record.availableDay && (record.availableDay < record.usedDay || record.availableDay === record.usedDay)"
            style="color:red"
          >{{record.usedDay}}</span>
          <span
            v-else-if="record.availableDay && ((record.availableDay - record.usedDay) > 0 ) && ((record.availableDay - record.usedDay) < 4)"
            style="color:orange"
          >{{record.usedDay}}</span>
          <span v-else>{{record.usedDay}}</span>
        </template>
        <span slot="action" slot-scope="record">
          <a @click="edit(record)" style="margin-right:10px">编辑</a>
          <span v-if="record.inUse === 0">修洗中</span>
          <a
            v-else-if="record.inUse === 1 && (record.containerStatus === 'BROKEN' || record.containerStatus === 'DIRTY')"
            @click="wash(record)"
          >修洗</a>
        </span>
      </a-table>
    </div>
    <a-modal
      v-model="editVisible"
      title="编辑"
      :body-style="{padding:'40px 40px 20px 20px'}"
      :width="1000"
      centered
      :confirm-loading="confirmLoading"
      @ok="editVersion"
      destroyOnClose
    >
      <a-form-model
        ref="editForm"
        :rules="rules"
        :model="editForm"
        :label-col="{span:6}"
        :wrapper-col="{span:18}"
      >
        <a-row>
          <a-col :span="24">
            <a-form-model-item
              label="当前所在港口"
              :label-col="{span:3}"
              :wrapper-col="{span:9}"
              prop="portId"
            >
              <a-select v-model="editForm.portId">
                <a-select-option value>请选择</a-select-option>
                <a-select-option
                  v-for="(item,index) in portList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <!-- 箱况 -->
            <a-form-model-item label="箱况" prop="containerStatus">
              <a-select v-model="editForm.containerStatus">
                <a-select-option value>请选择</a-select-option>
                <a-select-option value="A">A</a-select-option>
                <a-select-option value="COMMON">普通</a-select-option>
                <a-select-option value="BROKEN">坏箱</a-select-option>
                <a-select-option value="DIRTY">污箱</a-select-option>
              </a-select>
            </a-form-model-item>
            <!-- 货重（吨） -->
            <a-form-model-item label="货重（吨）">
              <!-- <a-input type="text" v-model="editForm.goodsWeight" /> -->
              <a-input-number
                :min="0.01"
                :max="999999999999.999"
                :precision="3"
                v-model="editForm.goodsWeight"
                style="width:100%"
              />
            </a-form-model-item>
            <!-- 提重日期 -->
            <a-form-model-item label="提重日期">
              <a-date-picker
                :default-value="editForm.getHeavyTime ? momentDate(editForm.getHeavyTime, dateFormat) : ''"
                :format="dateFormat"
                @change="editOnChange1"
              />
            </a-form-model-item>
            <!-- 提空日期 -->
            <a-form-model-item label="提空日期">
              <a-date-picker
                :default-value="editForm.getEmptyTime ? momentDate(editForm.getEmptyTime, dateFormat) : ''"
                :format="dateFormat"
                @change="editOnChange2"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <!-- 箱态 -->
            <a-form-model-item label="箱态" prop="emptyOrHeavy">
              <a-select v-model="editForm.emptyOrHeavy">
                <a-select-option value>请选择</a-select-option>
                <a-select-option :value="1">空</a-select-option>
                <a-select-option :value="2">重</a-select-option>
              </a-select>
            </a-form-model-item>
            <!-- 货名 -->
            <a-form-model-item label="货名">
              <a-input type="text" v-model="editForm.goodsName" />
            </a-form-model-item>
            <!-- 反空日期 -->
            <a-form-model-item label="反空日期">
              <a-date-picker
                :default-value="editForm.returnEmptyTime ? momentDate(editForm.returnEmptyTime, dateFormat) : ''"
                :format="dateFormat"
                @change="editOnChange3"
              />
            </a-form-model-item>
            <!-- 反重日期 -->
            <a-form-model-item label="反重日期">
              <a-date-picker
                :default-value="editForm.returnHeavyTime ? momentDate(editForm.returnHeavyTime, dateFormat) : ''"
                :format="dateFormat"
                @change="editOnChange4"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              label="备注"
              :label-col="{span:3}"
              :wrapper-col="{span:21}"
              prop="remark"
            >
              <a-input
                v-model="editForm.remark"
                type="textarea"
                :max-length="200"
                :auto-size="{ minRows: 3, maxRows: 3 }"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <a-modal
      v-model="importFile"
      title="导入集装箱"
      :body-style="{padding:'30px 40px 20px 20px'}"
      :footer="null"
      :width="1000"
      centered
      destroyOnClose
    >
      <uploadFile :length="1" @uploadFile="contractPics" />
    </a-modal>
  </div>
</template>
<script>
import { commonExport } from '@/api/request'
import {
  queryPortNameList,
  queryHolderNameList,
  queryContainerTypeList,
  queryContainerFlowList,
  editContainerFlowInfo,
  addContainerRepairWash
} from '@/api/boxManagementCenter'
import moment from 'moment'
import uploadFile from '@/components/uploadFile'

const formMessage = `必填项不能为空`
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '封号',
    dataIndex: 'containerSealNo',
    customRender: (text, record, index) => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '运单号',
    dataIndex: 'seagoingShipOrderCode',
    width: 150,
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '公司编号',
    width: 150,
    dataIndex: 'shipOrderCode',
    scopedSlots: {
      customRender: 'company'
    }
  },
  {
    title: '是否调空箱入场',
    dataIndex: 'enterIsEmpty',
    _needName: true,
    width: 150,
    customRender: (text, record, index) => {
      return record.enterIsEmpty === 1 ? '是' : '否'
    }
  },
  {
    title: '箱型',
    dataIndex: 'containerType'
  },
  {
    title: '持箱人',
    dataIndex: 'holder'
  },
  {
    title: '箱属',
    dataIndex: 'containerBelong',
    customRender: (text, record, index) => {
      return record.containerBelong || '--'
    }
  },
  {
    title: '箱况',
    _needName: true,
    dataIndex: 'containerStatus',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '箱态',
    dataIndex: 'emptyOrHeavy',
    _needName: true,
    customRender: (text, record, index) => {
      return record.emptyOrHeavy === 1 ? '空' : '重'
    }
  },
  {
    title: '货重（吨）',
    dataIndex: 'goodsWeight',
    customRender: (text, record, index) => {
      return record.goodsWeight || '--'
    }
  },
  {
    title: '卸船港口',
    dataIndex: 'unloadingPortName',
    customRender: (text, record, index) => {
      return record.unloadingPortName || '--'
    }
  },
  {
    title: '所在港口',
    dataIndex: 'portName'
  },
  {
    title: '始发港',
    dataIndex: 'startPortName',
    customRender: (text, record, index) => {
      return record.startPortName || '--'
    }
  },
  {
    title: '目的港',
    dataIndex: 'endPortName',
    customRender: (text, record, index) => {
      return record.endPortName || '--'
    }
  },
  {
    title: '船名/航次',
    dataIndex: 'shipVoyageName',
    width: 180,
    customRender: (text, record, index) => {
      return record.shipVoyageName || '--'
    }
  },
  {
    title: '卸船日期',
    dataIndex: 'enterTime',
    width: 150,
    customRender: (text, record, index) => {
      return record.enterTime || '--'
    }
  },
  {
    title: '可用箱期（天）',
    dataIndex: 'availableDay',
    width: 150,
    customRender: (text, record, index) => {
      return record.availableDay || '不限'
    }
  },
  {
    title: '已用箱天数', // 需要修改
    dataIndex: 'usedDay',
    scopedSlots: {
      customRender: 'day'
    }
  },
  {
    title: '提重日期',
    dataIndex: 'getHeavyTime',
    width: 150,
    customRender: (text, record, index) => {
      return record.getHeavyTime || '--'
    }
  },
  {
    title: '反空日期',
    dataIndex: 'returnEmptyTime',
    width: 150,
    customRender: (text, record, index) => {
      return record.returnEmptyTime || '--'
    }
  },
  {
    title: '提空日期',
    dataIndex: 'getEmptyTime',
    width: 150,
    customRender: (text, record, index) => {
      return record.getEmptyTime || '--'
    }
  },
  {
    title: '反重日期',
    dataIndex: 'returnHeavyTime',
    width: 150,
    customRender: (text, record, index) => {
      return record.returnHeavyTime || '--'
    }
  },
  {
    title: '装卸费（元）',
    dataIndex: 'enterHandlingFee',
    customRender: (text, record, index) => {
      return record.enterHandlingFee ? record.enterHandlingFee.toFixed(2) : '--'
    }
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 150,
    customRender: (text, record, index) => {
      return record.remark || '--'
    }
  },
  {
    title: '操作',
    fixed: 'right',
    width: 120,
    scopedSlots: {
      customRender: 'action'
    }
  }
]
export default {
  components: {
    uploadFile
  },
  data () {
    return {
      confirmLoading: false,
      form: {
        codeLike: '', // 箱号/封号/运单号/公司编号
        shipNameLike: '', // 船名/航次
        containerBelongLike: '', // 箱属
        containerStatus: '', // 箱况 A(“A”),COMMON(“普通”),BROKEN(“坏箱”),DIRTY(“污箱”)
        dateSearchType: 1, // 日期类型 1、卸船 2、提重 3、反空 4、提空 5、反重 6、装船
        startDate: '',
        endDate: '',
        emptyOrHeavy: '', // 箱态：1空，2重
        portId: '', // 港口id
        startPortLike: '', // 始发港
        endPortLike: '', // 目的港
        containerExpireType: '', // 是否到期 1是 0否
        containerTypeId: '', // 箱型id
        holderId: '' // 持箱人id
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      portList: [],
      holderList: [],
      containerList: [],
      editVisible: false,
      editForm: {
        portId: '',
        id: '',
        containerStatus: '', // 箱况 A(“A”),COMMON(“普通”),BROKEN(“坏箱”),DIRTY(“污箱”)
        emptyOrHeavy: '', // 箱态：1空，2重
        goodsWeight: '', // 货重
        goodsName: '', // 货名
        getHeavyTime: '', // 提重日期
        returnEmptyTime: '', // 反空日期
        getEmptyTime: '', // 提空日期
        returnHeavyTime: '', // 反重日期
        remark: '' // 备注
      },
      rules: {
        portId: [
          { required: true, message: formMessage, trigger: ['blur', 'change'] }
        ],
        containerStatus: [
          { required: true, message: formMessage, trigger: 'change' }
        ],
        emptyOrHeavy: [
          { required: true, message: formMessage, trigger: 'change' }
        ],
        remark: [
          { required: true, message: formMessage, trigger: 'blur' }
        ]
      },
      dateFormat: 'YYYY-MM-DD HH:mm',
      importFile: false,
      btnControl: {}
    }
  },
  methods: {
    momentDate (date, format) {
      return moment(date)
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => { })
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => { })
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => { })
    },
    flowListRequest (e) {
      this.loading = true
      queryContainerFlowList(e)
        .then(res => {
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            pageSizeOptions: ['10', '30', '50', '100', '500'],
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.flowListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.flowListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => { })
    },
    editFlowInfoRequest (e) {
      this.confirmLoading = true
      editContainerFlowInfo(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('编辑成功！')
            this.flowListRequest({
              ...this.form,
              pageNum: this.pageNum,
              pageSize: this.pageSize
            })
            setTimeout(() => {
              this.editVisible = false
              this.confirmLoading = false
            }, 800)
          }
        })
        .catch(rs => {
          this.confirmLoading = false
        })
    },
    washFlowRequest (e) {
      addContainerRepairWash(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功！')
            this.flowListRequest({
              ...this.form,
              pageNum: this.pageNum,
              pageSize: this.pageSize
            })
          }
        })
        .catch(rs => { })
    },
    onChange (data, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      this.flowListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      commonExport('/container/exportContainerFlowList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    excelImport () {
      if (!this.btnControl.import) {
        this.$message.error('您无此权限！')
        return false
      }
      this.importFile = true
    },
    edit (e) {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      console.log(e)
      let {
        id,
        containerStatus,
        emptyOrHeavy,
        goodsWeight,
        goodsName,
        getHeavyTime,
        returnEmptyTime,
        getEmptyTime,
        returnHeavyTime,
        remark,
        portId
      } = e
      this.editForm = {
        id,
        containerStatus,
        emptyOrHeavy,
        goodsWeight,
        goodsName,
        getHeavyTime,
        returnEmptyTime,
        getEmptyTime,
        returnHeavyTime,
        remark,
        portId
      }
      this.editVisible = true
    },
    wash (e) {
      if (!this.btnControl.repairWash) {
        this.$message.error('您无此权限！')
        return false
      }
      this.washFlowRequest({ id: e.id })
    },
    editVersion () {
      let _this = this
      _this.$refs.editForm.validate(valid => {
        if (valid) {
          _this.editFlowInfoRequest({ ..._this.editForm })
        }
      })
    },
    editOnChange1 (date, dateString) {
      this.editForm.getHeavyTime = dateString
    },
    editOnChange2 (date, dateString) {
      this.editForm.getEmptyTime = dateString
    },
    editOnChange3 (date, dateString) {
      this.editForm.returnEmptyTime = dateString
    },
    editOnChange4 (date, dateString) {
      this.editForm.returnHeavyTime = dateString
    },
    // test
    contractPics (e) {
      // // console.log(e)
      if (e) {
        this.importFile = false
        this.check()
      }
    },
    company (e) {
      window.open(`/orderCenter/order/detail/${e.orderShipId}`, '_blank')
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.portListRequest({
      status: 1,
      isContainerManagement: 1
    })
    this.holderListRequest({})
    this.containerListRequest({})
    this.flowListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
